<template>
  <div class="page-container">
    <page-header title="合同列表"></page-header>

    <div class="page-card">
      <div class="table-filter">
        <div class="filter-left">

          <div class="filter-row">
            <div class="row-title">合同状态：</div>
            <div class="row-content">
              <div v-for="(item,index) in filters1" :key="index" class="row-checkbox">
                <a-checkbox>
                  {{ item.title }}
                </a-checkbox>
              </div>
            </div>
          </div>

          <div class="filter-row">
            <div class="row-title">合同类型：</div>
            <div class="row-content">
              <div v-for="(item,index) in filters2" :key="index" class="row-checkbox">
                <a-checkbox>
                  {{ item.title }}
                </a-checkbox>
              </div>
            </div>
          </div>

          <div class="filter-row">
            <div class="row-title">归属项目：</div>
            <div class="row-content">
              <div class="row-select">
                <a-select
                    show-search
                    placeholder="选择归属项目"
                    option-filter-prop="children"
                >
                  <a-select-option value="jack">
                    项目1
                  </a-select-option>
                  <a-select-option value="lucy">
                    项目2
                  </a-select-option>
                  <a-select-option value="tom">
                    项目3
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </div>

        </div>


        <div class="filter-right">
          <div class="filter-search">
            <a-input-search placeholder="输入项目名称" />
          </div>
        </div>
      </div>

       <div class="table-wrap">
            <div class="table-header">
              <div class="font-wb">共计<span class="font-c-master margin-lr5">502</span>条数据</div>
            </div>
            <a-table :columns="columns" :data-source="data" bordered>
              <div slot="priority" slot-scope="priority">
                <a-tag
                    :color="priority === '高' ? 'volcano' : 'green'"
                >
                  {{ priority }}
                </a-tag>
              </div>

              <div slot="urgency" slot-scope="urgency">
                <a-tag
                    :color="urgency === '紧急' ? 'volcano' : 'green'"
                >
                  {{ urgency }}
                </a-tag>
              </div>

              <div slot="progress" slot-scope="progress">
                  <a-progress :percent="progress" />
              </div>

            </a-table>
          </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'reportList',
  data () {
    return {
      filters1: [
        {
          title: '草稿',
          value: '1'
        },
        {
          title: '审批中',
          value: '2'
        },
        {
          title: '已立项',
          value: '3'
        },
        {
          title: '被驳回',
          value: '4'
        },
        {
          title: '采招中',
          value: '5'
        },
        {
          title: '已采招',
          value: '6'
        },
        {
          title: '已法审',
          value: '7'
        },
        {
          title: '已签约',
          value: '8'
        },
        {
          title: '执行中',
          value: '9'
        },
        {
          title: '已超期',
          value: '10'
        },
        {
          title: '已终止',
          value: '11'
        },
        {
          title: '已解除',
          value: '12'
        },
        {
          title: '已结束',
          value: '13'
        },
        {
          title: '已归档',
          value: '14'
        }
      ],
      filters2: [
        {
          title: '类型1',
          value: '1'
        },
        {
          title: '类型2',
          value: '2'
        },
        {
          title: '类型3',
          value: '3'
        },
        {
          title: '类型4',
          value: '4'
        }
      ],
      columns: [
        {
          title: '编号',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
        },
        {
          title: '合同名称',
          dataIndex: 'person',
          key: 'person',
          ellipsis: true,
        },
        {
          title: '负责人',
          dataIndex: 'person',
          key: 'person',
          ellipsis: true,
        },
        {
          title: '优先级',
          dataIndex: 'priority',
          key: 'priority',
          scopedSlots: { customRender: 'priority' },
        },
        {
          title: '紧急程度',
          dataIndex: 'urgency',
          key: 'urgency',
          scopedSlots: { customRender: 'urgency' },
        },
        {
          title: '项目进度',
          dataIndex: 'progress',
          key: 'progress',
        //   scopedSlots: { customRender: 'progress' },
          customRender: (text, row, index) => {
              return  <div><a-progress percent={text} status="active" /><a-progress strokeColor="green" percent={text} status="active" /></div>
            },
        },
        {
          title: '合同类型',
          dataIndex: 'type',
          key: 'type',
          ellipsis: true,
        },
        {
          title: '开始时间',
          dataIndex: 'createTime',
          key: 'createTime',
          ellipsis: true,
          sorter: (a, b) => a.date - b.date
        },
         {
          title: '结束时间',
          dataIndex: 'createTime',
          key: 'createTime',
          ellipsis: true,
          sorter: (a, b) => a.date - b.date
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true
        },
      ],
      data: [
        {
          key: '1',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '2',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '低',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '3',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '不紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '4',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '5',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '6',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        }
      ]
    };
  },
  mounted () {

  },
  methods: {}
};
</script>

<style lang="scss" scoped>
</style>
